<template>
  <div class="details">
    <el-card>
      <el-form ref="addInfoRef" :inline="true" label-position="top" :model="addInfo" :rules="addInfoRules">
        <el-row type="flex" align="middle" justify="start">
          <el-form-item label="仓库编号" style="width: 30%">
            <el-input v-model="addInfo.code" placeholder="请输入" disabled />
          </el-form-item>
          <el-form-item label="仓库名称" style="width: 30%" prop="name">
            <el-input v-model="addInfo.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="仓库类型" style="width: 30%" prop="type">
            <el-select v-model="addInfo.type" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in selectType" :key="item.type" :label="item.label" :value="item.type" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row type="flex" align="middle" justify="start">
          <el-form-item label="省/市/区" style="width: 61.5%" prop="area">
            <el-cascader v-model="addInfo.area" :options="areaOptions" :props="{ expandTrigger: 'hover', value: 'label' }" style="width: 100%" clearable />
          </el-form-item>
        </el-row>
        <el-row type="flex" align="middle" justify="start">
          <el-form-item label="详细地址" style="width: 61.5%">
            <el-input v-model="addInfo.address" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="仓库状态" style="width: 30%" prop="status">
            <el-radio-group v-model="addInfo.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row type="flex" align="middle" justify="start">
          <el-form-item label="仓库面积" style="width: 30%">
            <el-input v-model="addInfo.surface" type="number" placeholder="请输入" clearable>
              <template slot="append">m³</template>
            </el-input>
          </el-form-item>
          <el-form-item label="负责人" style="width: 30%" prop="personName">
            <el-input v-model="addInfo.personName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="联系电话" style="width: 30%">
            <el-input v-model="addInfo.phone" type="tel" placeholder="请输入" />
          </el-form-item>
        </el-row>
        <el-divider />
        <el-row type="flex" align="center" justify="center" style="margin-top: 30px">
          <el-form-item>
            <el-button type="primary" plain @click="back">返回</el-button>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
import { nextCodeAPI, addStorageAPI, searchWarehouseAPI, editStorageAPI } from '@/api'
import { getEditId } from '@/utils/auth'
export default {
  name: 'Details',
  data() {
    return {
      addInfo: {
        address: '',
        area: [],
        city: '',
        code: '',
        location: '',
        name: '',
        personName: '',
        phone: '',
        province: '',
        status: null,
        surface: '',
        type: ''
      },
      // 校验
      addInfoRules: {
        name: [{ required: true, message: '请输入内容', trigger: blur }],
        type: [{ required: true, message: '请输入内容', trigger: blur }],
        area: [{ required: true, message: '请输入内容', trigger: blur }],
        personName: [{ required: true, message: '请输入内容', trigger: blur }],
        status: [{ required: true, message: '请输入内容', trigger: blur }]
      },
      // 仓库类型
      selectType: [
        { type: 'ZZ', label: '中转仓' },
        { type: 'JG', label: '加工仓' },
        { type: 'CB', label: '储备仓' },
        { type: 'LC', label: '冷藏仓' }
      ],
      // 地区选择的数据
      areaOptions: regionData,
      // 切换新增与编辑的id
      changeId: ''
    }
  },
  watch: {
    $route() {
      this.$route.meta.showNav = true
      // this.$route.name === 'adddetails' ? this.getNextCodeInfo() : this.getSearchWarehouse()
    }
  },
  created() {
    this.$route.name === 'adddetails' ? this.getNextCodeInfo() : this.getSearchWarehouse()
  },
  methods: {
    // 区域编码
    async getNextCodeInfo() {
      const res = await nextCodeAPI('CK')
      this.addInfo.code = res.data
    },
    // 查询仓库
    async getSearchWarehouse() {
      const res = await searchWarehouseAPI(getEditId() || this.$route.params.editid)
      // console.log(res.data)
      this.addInfo = res.data
      this.addInfo.area = res.data.location.split('/')
      this.changeId = res.data.id
    },
    // 取消
    back() {
      this.addInfo = {
        address: '',
        area: [],
        city: '',
        code: '',
        location: '',
        name: '',
        personName: '',
        phone: '',
        province: '',
        status: '',
        surface: '',
        type: ''
      }
      this.$router.back()
    },
    onSubmit() {
      this.$refs.addInfoRef.validate(async (valid) => {
        if (!valid) return this.$message.warning('内容不能为空')
        const areaCode = Object.keys(CodeToText).find((item) => CodeToText[item] === this.addInfo.area.at(-1))
        const cityCode = Object.keys(CodeToText).find((item) => CodeToText[item] === this.addInfo.area.at(-2))
        const provinceCode = Object.keys(CodeToText).find((item) => CodeToText[item] === this.addInfo.area.at(0))
        const locationInfo = this.addInfo.area.join('/')
        if (!this.changeId) {
          await addStorageAPI({
            ...this.addInfo,
            area: areaCode,
            city: cityCode,
            province: provinceCode,
            location: locationInfo
          })
        } else {
          await editStorageAPI({
            ...this.addInfo,
            area: areaCode,
            city: cityCode,
            province: provinceCode,
            location: locationInfo
          })
        }
        this.$route.meta.showNav = false
        this.$router.push('/manage-base-info/warehouse')
        this.$message.success(this.changeId ? '编辑成功' : '新增成功')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-button {
  height: 40px;
  width: 160px;
  border-radius: 20px;
  border: 0;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  cursor: pointer;
  outline: 0;
}

::v-deep .el-form-item__label {
  padding: 0;
  line-height: 30px;
  font-size: 12px;
  color: #887e7e;
}
.el-form-item {
  margin-left: 15px;
}
::v-deep .el-input__inner {
  height: 40px;
  background-color: #f8f5f5;
}
</style>
